<!-- 详情页进度组件 -->
<style lang="less">
.progress-list-box{
  padding:22px 28px 0 16px;
  background: #fff;
}
.progress-wrap{
  padding:0 0 30px;
  position: relative;
  &:after{
    width:1px;
    height: 100%;
    content: '';
    border-left: 1px dashed #7CA7F3;
    position: absolute;
    left: 7px;
    top:-100%;
  }
  &:first-of-type:after{
    border-left:0;
  }
  &:last-of-type{
    padding: 0 0 22px;
  }
  .index, .end{
    height: 16px;
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    position: absolute;
    top:0;
  }
  .index{
    width: 16px;
    border-radius: 50%;
    background: #7CA7F3;
    color: #fff;
    left: 0;
    z-index:1;
  }
  .end{
    color: #7CA7F3;
    left: -5px;
  }
}
.txt-end{
  text-align: center;
  color: #7CA7F3;
  font-size: 18px;
  line-height: 1;
  padding:20px 0 10px;
}
.progress-ctx{
  margin:0 0 0 36px;
  background: #F9F9F9;
  border-radius: 10px;
  border:1px solid #efefef;
  padding:0 0 10px;
  .pic{
    width: 40px;
    height: 40px;
    border:1px solid #efefef;
    background: #fff;
    border-radius: 50%;
    margin:10px 10px 0 15px;
    text-align:center;
    line-height:40px;
    color:#BFBFBF;
    img{
      display:block;
      width: 100%;
    }
    .iconfont{
      font-size:30px;

    }
  }
  .msg{
    line-height: 1;
    font-size: 15px;
    .name{
      padding:10px 0 12px;
    }
    .green{
      color: #008000;
    }
    .txt{
      padding:0 10px 0 0;
      line-height:21px;
    }
  }
  .time{
    padding:11px 10px 0 5px;
    line-height: 1;
    text-align: right;
  }
}
.progress-refuse{
  padding:6px 16px;
  background:#7CA7F3;
  color:#fff;
  font-size:14px;
}
</style>
<template>
<div>
  <!--<div class="loader-base" v-if="showLoad"><div class="loader-wrap"></div></div>-->
  <div v-if="formData && refusememo" class="progress-refuse"><i class="iconfont icon-message"></i>
  {{refusememo}}
  </div>
  <div class="ctx-line displayflex" :class="{'move':!toggle}" @click="toggleNext"
       v-if="progressData && toggleTab">
    <div class="label flex1">审批流程</div>
    <i class="iconfont icon-coll"></i>
  </div>
  <div class="progress-list-box" v-if="progressData && toggle && !formData" :class="{'mt10':!toggleTab}">
    <div class="progress-wrap" v-for="(item, index) in progressData">
      <div class="index">{{index+1}}</div>
      <div class="progress-ctx displayflex">
        <div class="pic"><i class="iconfont icon-person"></i></div>
        <div class="msg flex1">
          <div class="displayflex">
            <div class="name">{{item.operator}}</div>
            <div class="flex1 time">{{item.operatortime}}</div>
          </div>
          <div class="blue txt" v-if="item.memo.indexOf('驳回原因')<0">{{item.stepname}}</div>
          <div class="blue txt" v-else>{{item.memo}}</div>
        </div>
      </div>
    </div>
    <div class="progress-wrap" v-if="lastNode.nodetext">
      <div class="index">{{progressData.length+1}}</div>
      <div class="displayflex progress-ctx">
        <div class="pic"><i class="iconfont icon-person"></i></div>
        <div class="msg flex1">
          <div class="displayflex">
            <div class="name">{{lastNode.tooltip | getPerson}}</div>
            <div class="flex1 time blue" v-if="status!=100">处理中</div>
          </div>
       
          <div class="blue">{{lastNode.nodetext}}</div>
        </div>
      </div>
    </div>
    <div class="progress-wrap" v-if="status==100">
      <div class="end">END</div>
      <div class="progress-ctx">
        <div class="txt-end">流程结束</div>
      </div>
    </div>
  </div>
</div>
</template>
<script>
export default {
  props:{
    toggleTab: {
      type: Boolean,
      default: false
    },
    formData: {
      type: Boolean,
      default: false
    },
  },
  data(){
    return {
      // showLoad:false,
      progressData:'',
      lastNode:'',
      status:'',
      toggle:true,
      refusememo:''
    }
  },
  created(){
    if(this.$route.query.bizdataguid || this.$route.query.guid){
      this.getData();
    };
  },

  methods:{
    getData(){
      this.$emit("showLoadProgress", true);
      var data = {
            "bizguid": this.$route.query.bizdataguid || this.$route.query.guid
          };
      var _this = this;
      this.Ajax.post('WorkflowService/Query',data).then(function(resp) {
        if(resp.code == 'SUCC'){
          _this.$emit("showLoadProgress", false);
           console.log(JSON.parse(resp.data),"组件工作流")
          let result = JSON.parse(resp.data);
          if(result.tracinglog){
            _this.status = result.tracinglog.schedule;
            _this.progressData = result.tracinglog.steplog;
            let lastNode = _this.progressData[_this.progressData.length-1];
            console.log(lastNode);
            if(lastNode.ispass == 'Y'){
              let nodeList = result.nodelist;
              for(let i in nodeList){
                if(nodeList[i].nodeid == lastNode.nextnodeid){
                  _this.lastNode = nodeList[i];
                }
              };
            }else{
              _this.refusememo = lastNode.memo;
            }
            let nodelist = result.nodelist,
                FlowList = [];
            nodelist.forEach(x => {
              if(x.nodetype === 'FlowBusiness' || x.nodetype === 'FlowAudit'){
                FlowList.push(x);
              }
            });
            _this.$emit("emitNodeInfo", FlowList);
          }
        } else {
          _this.$vux.toast.show({
            type: "warn", //success, warn, cancel, text
            text: resp.message
          });
        }
      });
    },
    toggleNext(){
      this.toggle = !this.toggle;
    }
  },

  filters:{
    getPerson(val){
      if(!val){
        return '';
      }else{
        return val.split("（")[1].split("）")[0];
      };
    }
  }
}
</script>
